$arrowSize: 20px;
$checkIcoSize: 14px;

.container {
    padding: 5px;
}

%title {
    position: relative;
    margin: 0;
    padding-right: 2 * $arrowSize;
    font-size: 18px;
    cursor: pointer;

    &::before {
        position: absolute;
        top: 50%;
        right: 0.5 * $arrowSize;
        display: block;
        content: '';
        width: $arrowSize;
        height: $arrowSize;
        background: url('@/assets/icons/up-down.svg') center/cover no-repeat;
        @extend %transition;
    }
}

.title-open {
    @extend %title;
    &::before {
        transform: translate(0, -50%) rotate(90deg);
    }
}

.title-close {
    @extend %title;
    &::before {
        transform: translate(0, -50%) rotate(-90deg);
    }
}

.list {
    list-style: none;
    padding-left: 0;
}

%item {
    position: relative;
    margin: 5px 0;
    padding-left: 2 * $checkIcoSize;
    font-size: 16px;
    cursor: pointer;

    &::before {
        @extend %transition;
        position: absolute;
        top: 50%;
        left: $checkIcoSize;
        display: block;
        content: '';
        width: $checkIcoSize;
        height: $checkIcoSize;
        background: url('@/assets/icons/check-ico.svg') center/cover no-repeat;
    }
}

.item-normal {
    @extend %item;
    color: rgba($color-black, 0.75);

    &::before {
        visibility: hidden;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
}

.item-checked {
    @extend %item;
    color: $color-black;

    &::before {
        visibility: visible;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}
